<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  <canvas id="choujiang" width="600" height="600"></canvas>
  <script>
    var canvas,ctx;
    var awards = [
      { level: '特等奖', name: '我的亲笔签名'},
      { level: '未中奖', name: '未中奖'},
      { level: '一等奖', name: '玛莎拉蒂超级经典限量跑车'},
      { level: '未中奖', name: '未中奖'},
      { level: '二等奖', name: '辣条一包'},
      { level: '未中奖', name: '未中奖' },
      { level: '四等奖', name: '未中奖'},
      { level: '三等奖', name: '辣条一包'},
      { level: '未中奖', name: '未中奖'},
    ]
    function getLineTextList(context, text, maxLineWidth) {
      var wordList = text.split(''), tempLine = '', lineList = []
      for (var i = 0; i < wordList.length; i++) {
        // measureText方法是测量文本的宽度的,这个宽度相当于我们设置的
        // fontSize的大小,所以基于这个,我们将maxLineWidth设置为当前字体大小的倍数
        if (context.measureText(tempLine).width >= maxLineWidth) {
          lineList.push(tempLine)
          maxLineWidth -= context.measureText(text[0]).width
          tempLine = ''
        }
        tempLine += wordList[i]
      }
      lineList.push(tempLine)
      return lineList
    }
    function init() {
      canvas = document.getElementById('choujiang')
      ctx = canvas.getContext('2d');
      drawPannel();
      drawBlock();
      drawButton();
      drawArrow();
    }
    function drawPannel(){
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#FD6961';
      ctx.arc(300, 300, 150, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    }
    function drawBlock() {
      var startRadius = 0;
      var avgRadius = Math.PI * 2 / 9;
      var endRadius = startRadius + avgRadius;
      for(var i = 0; i < awards.length; i++){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
        ctx.moveTo(300, 300);
        ctx.arc(300, 300, 148, startRadius, endRadius, false);
        ctx.fill();
        ctx.restore();

        ctx.save();
        ctx.fillStyle = '#ffffff';
        ctx.font = '14px arial';
        ctx.translate(
          300 + Math.cos(startRadius + avgRadius / 2) * 148,
          300 + Math.sin(startRadius + avgRadius / 2) * 148
        );
        ctx.rotate(startRadius + avgRadius / 2 + Math.PI / 2);
        getLineTextList(ctx, awards[i].name, 70).forEach((line, index) => {
          // 绘制文字的方法,三个参数分别带别:要绘制的文字,开始绘制的x坐标,开始绘制的y坐标
          ctx.fillText(line, -ctx.measureText(line).width / 2, ++index * 25);
        })
        startRadius += avgRadius;
        endRadius += avgRadius;
        ctx.restore();
      }
    }
    function drawButton() {
      ctx.save()
      ctx.beginPath()
      ctx.fillStyle = '#FF0000'
      ctx.arc(300, 300, 30, 0, Math.PI * 2, false)
      ctx.fill()
      ctx.restore()
      
      ctx.save()
      ctx.beginPath()
      ctx.fillStyle = '#FFF'
      ctx.font = '20px Arial'
      ctx.translate(300, 300)
      ctx.fillText('Start', -ctx.measureText('Start').width / 2, 8)
      ctx.restore()
    }
// add
// 绘制箭头，用来指向我们抽中的奖品
    function drawArrow() {
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#FF0000'
      ctx.moveTo(280, 290);
      ctx.lineTo(300, 220);
      ctx.lineTo(320, 290);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }

    function win2canvas(canvas, e) {
      var canvasPostion = canvas.getBoundingClientRect(), x = e.clientX, y = e.clientY;
      return {
        x: x - canvasPostion.left,
        y: y - canvasPostion.top
      }
    }
    init();
  </script>
</body>
</html>